Quarto를 이용한 과학기술 교육컨텐츠 개발

Author

최규빈

Published

January 2, 2025

1 What is Quarto?

1.1 About Quarto

Official website: https://quarto.org/

Quarto is an open-source scientific and technical publishing system built on Pandoc.

  • Publish high-quality articles, reports, presentations, websites, blogs, and books in HTML, PDF, MS Word, ePub, and more.
  • Author with scientific markdown, including equations, citations, crossrefs, figure panels, callouts, advanced layout, and more.

2 Why should we use quarto?

2.1 Equations

  • \(x, y, z\)
  • \(x_1,x_2,x_3\)
  • \(x^2, x^3, x^4\)
  • \(\alpha, \beta, \gamma, \delta, \epsilon\)
  • \(\frac{1}{2}, \frac{1}{3}, \frac{2}{3}, \dots\)
  • \(\frac{1}{\sqrt{2\pi}} e^{-\frac{1}{2}x^2}\)
  • \(X_1, X_2, \dots, X_n \overset{i.i.d.}{\sim} N(0,1)\)
  • \(\frac{X_1+\dots+X_n}{n} \overset{p}{\to} \mu\)

2.2 Equations (2)

  • \({\boldsymbol a}, {\bf a}, {\boldsymbol B}, {\bf B}, {\boldsymbol \alpha}, {\boldsymbol \Omega}, \dots\)
  • \({\cal A}, {\cal B}, {\cal C}, \dots\)
  • \(\mathbb{R}, \mathbb{Z}, \mathbb{R}^2, \dots\)
  • \({\bf A}^{-1}, {\bf A}^{\top}, {\bf A}^t, \dots\)
  • \({\boldsymbol y} = {\bf X}{\boldsymbol \beta} + {\boldsymbol \epsilon}, \quad {\boldsymbol \epsilon} \sim N({\bf 0}, {\bf I})\)
  • \(\underset{x}{\operatorname{min}}f(x)\), \(\underset{x}{\operatorname{argmin}}f(x)\)
  • \(\begin{cases} x+y = 1 \\ x-y = 1\end{cases}\)

2.3 Tables (1)

Demonstration of pipe table syntax
Default Left Right Center
12 12 12 12
123 123 123 123
1 1 1 1

2.4 Tables (2)

Table 1: Main Caption
(a) First Table
Col1 Col2 Col3
A B C
E F G
A G G
(b) Second Table
Col1 Col2 Col3
A B C
E F G
A G G

Main Caption

2.5 Diagrams (1)

flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result1]
  C --> E[Result2]

2.6 Diagrams (2)

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>John: Hello John, how are you?
  loop Healthcheck
    John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts <br/>prevail!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

2.7 Diagrams (3)

G run run intr intr run--intr kernel kernel run--kernel runbl runbl intr--runbl runbl--run zombie zombie kernel--zombie sleep sleep kernel--sleep runmem runmem kernel--runmem sleep--runmem swap swap sleep--swap runswap runswap swap--runswap runswap--runmem new new runswap--new new--runmem

2.8 Footnotes

Here is an inline note.1

2.9 Citation

2.9.1 codes in quarto

- Blah Blah [@chandola2009anomaly; @bronstein2017geometric].

- Chandola says blah [-@chandola2009anomaly]

2.9.2 output

2.10 Bibliography Generation

2.10.1 codes in quarto

::: {#refs}
:::

2.10.2 output

Bronstein, Michael M, Joan Bruna, Yann LeCun, Arthur Szlam, and Pierre Vandergheynst. 2017. “Geometric Deep Learning: Going Beyond Euclidean Data.” IEEE Signal Processing Magazine 34 (4): 18–42.
Chandola, Varun, Arindam Banerjee, and Vipin Kumar. 2009. “Anomaly Detection: A Survey.” ACM Computing Surveys (CSUR) 41 (3): 1–58.

2.11 Tabsets

Content for Tab A

Content for Tab B

2.12 Figures (1)

2.13 Figures (2)

#| layout-ncol: 2
#| fig-cap: 
#|   - "Fig1: Scatter Plot"
#|   - "Fig2: Dot-connected Plot"

import matplotlib.pyplot as plt
plt.plot([1,2,4,3],'ro'); plt.show()
plt.plot([1,2,4,3],'--ro'); plt.show()
import matplotlib.pyplot as plt
plt.plot([1,2,4,3],'ro');plt.show()
plt.plot([1,2,4,3],'--ro');plt.show()

Fig1: Scatter Plot

Fig2: Dot-connected Plot

2.14 Layout (1)

2.14.1 List One

  • Item A
  • Item B
  • Item C

2.14.2 List Two

  • Item X
  • Item Y
  • Item Z

2.15 Layout (2)

  • Item X
  • Item Y
  • Item Z

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida eu erat et fring. Morbi congue augue vel eros ullamcorper, eget convallis tortor sagittis.

2.16 Chalkboard

Quarto includes a built-in version of the reveal.js-chalkboard plugin.

2.17 Interactive plots

import plotly.express as px

df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country",
           log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])
fig.show()

2.18 Outputs

Footnotes

  1. Inlines notes are easier to write, since you don’t have to pick an identifier and move down to type the note.↩︎